<template>
	<view>
		<view class="canvas">
			<canvas class="canvasa" @longtap="saveCans(1)" :style="{ width: cansWidth + 'px', height: cansHeight + 'px' }" canvas-id="firstCanvas"></canvas>
		</view>
		
		<view class="imglist">
			<view :style="[{ width:widths+'upx'}]">
				<block v-for="(swiperLists,index) in swiperList" :key="index">
					<image style="padding: 4upx;" @click="selseimg(swiperLists.posterImg)" :src="swiperLists.posterImg" mode="aspectFit"></image>
				</block>
			</view>
		</view>
		<view class="bottom">
			<!-- #ifdef H5 -->
			<view class="bottom3" style="width: 80%; text-align: center;" @click="sharelink()">{{$t('Copy link')}}</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="bottom3" style="width: 49%; text-align: center;" @click="sharelink()">{{$t('Copy link')}}</view>
			<view class="bottom1" style="width: 49%; text-align: center;" @click="saveCans()">{{$t('Save poster')}}</view>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	import  QR   from '@/static/js/wxqrcode.js';
	var that
	export default {
		data() {
			return {
				uid:'',
				avatar:'',
				qrcodeImg:'',
				userinfo:[],
				cansWidth: 375, //海报宽度
				cansHeight: 620, //海报高度
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				userdata: {}, //个人数据
				swiperList: [] ,//海报数组
				qrurl:''
			};
		},
		onLoad: function() {
			this.show = true;
			this.userinfo=uni.getStorageSync("userinfo");
			var avatar =uni.getStorageSync("userinfo").avatar
			if(avatar.indexOf("http") != -1){
				this.avatar=avatar;
			}else{
				this.avatar=this.configs.webUrl+avatar;
			}
			//注册地址h5直接注册，APP注册后跳转下载地址
			this.qrurl=this.configs.webUrl+'/h5/#/?fxpid='+this.userinfo.id
			let img = QR.createQrCodeImg(this.qrurl, {  
			     size: 360//二维码大小  
			})
			this.qrcodeImg = img;
			//console.log(this.qrcodeImg)
			that = this
			that.huizhihaibao() //请求海报数据
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: this.$t('fenxiao.haibao')
			});
		},
		methods: {
			doUpload(rsp) {
				//console.log(rsp);
				this.selseimg(rsp.path)
			},
			doBefore() {
				console.log('doBefore');
			},
			huizhihaibao() {
				var that = this
				//数据请求结束
				uni.showLoading({
					title: this.$t('Loading')
				});
				that.userdata = {
					img: "",
					text: ""
				}
				if(uni.getStorageSync("config").site.fxhb){
					var swiperList = uni.getStorageSync("config").site.fxhb
					let goodsData = [];
					swiperList.forEach(item=>{
						if(item.indexOf("http") != -1){
							item=item
						}else{
							item=that.configs.webUrl+item
						}
						goodsData.push({
							posterImg: item 
						})
					})
					that.swiperList=goodsData
				}else{
					that.swiperList = []
				}
				uni.hideLoading();
				//数据请求结束
				that.selseimg(that.swiperList[0].posterImg)
			},
			selseimg(e) { //绘制海报
				if (that.userinfo.nickname > 6) { //昵称太长加省略号
					that.userinfo.nickname = that.userinfo.nickname.slice(0, 6) + "..."
				}
				uni.showLoading({
					title: this.$t('Loading')
				});
				if(e.indexOf("http") != -1){
					// #ifdef H5
					that.selseimging(e)
					// #endif
					// #ifdef APP-PLUS || MP-WEIXIN
					uni.downloadFile({
						url: e,
						success: function(res) {
							if(res.tempFilePath){
								that.selseimging(res.tempFilePath)
							}
						}
					})
					// #endif
				}else{
					that.selseimging(e)
				}
			},
			selseimging(hbbj){
				const context = uni.createCanvasContext('firstCanvas')
				context.drawImage(hbbj, 0, 0, 375, 620) //海报背景
				var yd=20;//控制y的距离
				setTimeout(function() { //定时器，海报方法不能立即执行，等页面渲染完成
					
					context.shadowColor = '#999999';
					context.shadowOffsetX = 0;// 设置阴影的横向偏移量
					context.shadowOffsetY = 0;
					context.shadowBlur = 5;// 设置模糊等级
					context.drawImage(that.$config.staticUrl+'zw.png',10, 450+yd, 355, 110) //个人信息背景
					context.fill()
					context.save()
					
					context.drawImage(that.qrcodeImg, 260, 454+yd, 100, 100) //二维码图片 
					context.setFillStyle('#333333')
					context.setFontSize(14)
					context.fillText(that.$t('My invitation code')+' ' +that.userinfo.id, 20, 473+yd)
					context.fill()
					
					//context.setFillStyle('#333333')
					//context.setFontSize(12)
					//context.fillText('扫一扫二维码', 270, 468+yd)
					//context.fill()
					
					
					context.setFillStyle('#333333')
					context.setFontSize(14)
					context.fillText(that.userinfo.nickname, 80, 505+yd) //昵称
					context.fill()
				
					context.setFillStyle('#666666')
					context.setFontSize(14)
					context.fillText(that.$t('Inviting you to join'), 80, 525+yd)
					context.fillText(that.$t('Make money with phone'), 80, 545+yd)
					context.fill()
				
					context.save()
					context.beginPath()
					context.arc(44, 520+yd, 25, 0, 2 * Math.PI)
					context.clip()
					context.drawImage(that.avatar, 17, 490+yd, 55, 55) //头像
					context.restore()
					context.draw()
				
					uni.hideLoading();
				}, 1000);
			},
			sharelink(){
				let that=this
				uni.setClipboardData({
					data: this.qrurl,
					complete() {
						uni.showToast({
							title: that.$t('Sharing link copied')
						})
					}
				})
			},
			saveCans() { //保存海报
				var that=this
				uni.showLoading({
					title: this.$t('Save poster')+'...'
				});
				let tempRatio = 1;
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.cansWidth * tempRatio* 4,
					height: that.cansHeight * tempRatio* 4,
					destWidth: that.cansWidth * tempRatio * 4,
					destHeight: that.cansHeight * tempRatio * 4,
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								uni.showToast({
									title: that.$t('Save photo success')
								})
								that.imgsrc = res.tempFilePath	
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: that.$t('You have no permission'),
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
				
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
			

		}
	}
</script>

<style>
	.pageHeader {
		height: var(--status-bar-height);
		background-color: #FFFFFF;
	}

	.box-header {
		position: fixed;
		top: 0upx;
		width: 100%;
		z-index: 100;
	}

	.top-box {
		height: 100upx;
		width: 100%;
	}

	.canvas {
		display: flex;
		justify-content: center;
		border-radius: 16upx;
	}

	.bottom {
		padding: 20upx 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
	}
	
	.bottom1 {
		padding: 20upx 40upx;
		background: #FF8A00;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
	
	.bottom2 {
		padding: 20upx 40upx;
		background: #FF5256;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
	.bottom3 {
		padding: 20upx 40upx;
		background: #5E40FF;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.imglist {
		width: 100%;
		padding: 20upx 0;
		overflow: auto;
	}

	.imglist view {
		display: flex;
		justify-content: space-around;
	}

	.imglist image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}
</style>
